<template>
  <div id="tree-chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'TreeChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chart = echarts.init(document.getElementById('tree-chart'));

      var colors = ['#ff6f61', '#6b5b95', '#88b04b', '#ffa500', '#20b2aa'];

      function setNodeColors(node, depth) {
        node.itemStyle = {
          color: colors[depth % colors.length]
        };
        if (node.children) {
          for (var i = 0; i < node.children.length; i++) {
            setNodeColors(node.children[i], depth + 1);
          }
        }
      }

      var data = {
        name: 'Root',
        children: [
          { name: 'Level 1 - A', children: [{ name: 'Level 2 - A1' }, { name: 'Level 2 - A2' }] },
          { name: 'Level 1 - B', children: [{ name: 'Level 2 - B1' }] },
          { name: 'Level 1 - C', children: [{ name: 'Level 2 - C1' }, { name: 'Level 2 - C2' }, { name: 'Level 2 - C3' }] }
        ]
      };

      setNodeColors(data, 0);

      var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
 series: [
    {
      type: 'tree',
      data: [data],
      // ... （其他配置）
      layout: 'orthogonal',  // 设置布局为正交布局
      orient: 'RL',
      initialTreeDepth: -1,
      symbolSize: [120, 60],
      symbol: 'rect',
      left: '15%',
      top: '1%',
      bottom: '1%',
      right: '7%',
      lineStyle: {
        width: 4
      },
      label: {
        position: 'inside',
        verticalAlign: 'middle',
        align: 'center'
      },
      leaves: {
        label: {
          position: 'inside',
          verticalAlign: 'middle',
          align: 'center'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750,
      initialTreeDepth: -1,
      nodePadding: 20, // 设置节点间距
      nodeSpacing: 20,  // 设置节点水平间距
      layerPadding: 80  // 设置层间垂直间距
    }
  ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
#tree-chart {
  width: 100%;
  height: 400px;
}
</style>
